<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="list">
        <li>
            ¥ <input type="text" readonly="readonly" value="21.90" class="num" />
            <input type="text" value="1" class="text">
            <input type="button" value="-" class="btn1">
            <input type="button" value="+" class="btn2">
            <strong class="rest">0</strong>
        </li>
        <li>
            ¥ <input type="text" readonly="readonly" value="11.20" class="num" />
            <input type="text" value="1" class="text">
            <input type="button" value="-" class="btn1">
            <input type="button" value="+" class="btn2">
            <strong class="rest">0</strong>
        </li>
        <li>
            ¥ <input type="text" readonly="readonly" value="11.20" class="num" />
            <input type="text" value="1" class="text">
            <input type="button" value="-" class="btn1">
            <input type="button" value="+" class="btn2">
            <strong class="rest">0</strong>
        </li>
        <li>
            ¥ <input type="text" readonly="readonly" value="11.20" class="num" />
            <input type="text" value="1" class="text">
            <input type="button" value="-" class="btn1">
            <input type="button" value="+" class="btn2">
            <strong class="rest">0</strong>
        </li>
    </ul>
    <span id="result"></span>
    <!-- 保证2位小数 toFixed(2) -->
    <!-- getElementById() getElementByClassName() children() -->
    <script>
        var oList=document.getElementById("list");//1.获取ul的对象
        // console.log(oList);
        var aList=oList.children;
        //console.log(aList);//2.得到li对象
        var aRestAll=oList.getElementsByClassName("rest");
        // console.log(aRestAll);//3.获取到2个strong的rest,每一个的计算结果
        var result=document.getElementById("result");
        //console.log(result);//总结果值
        var allNumber=0;

        // 给每一个li添加一个加减法的操作
        for(var j=0;j<aList.length;j++){
            goodsfn(aList[j]);  
        }

        function goodsfn(obj){
            var aInputs=obj.getElementsByTagName('input');
            // console.log(aInputs);拿到每一个li里面的input
            // console.log(aInputs[2]);拿到+按钮或者-按钮
            var rest=obj.getElementsByClassName('rest')[0];
            // console.log(rest);//拿到每一个li的rest的结果的对象
            // console.log(rest.innerHTML);//拿到rest里面的值0
            // 初始值
            rest.innerHTML=aInputs[0].value;
            var  i=1;
            // 点击加按钮
            aInputs[3].onclick=function(){
                i++;
                aInputs[1].value=i;//每次加1的值给到数量值
                rest.innerHTML= ( aInputs[0].value*aInputs[1].value).toFixed(2)
                allFn()
            }
            // 减按钮
            aInputs[2].onclick=function(){
                i--;
                if(i<=1){
                    i=1;
                }
                aInputs[1].value=i;//每次加1的值给到数量值
                rest.innerHTML= ( aInputs[0].value*aInputs[1].value).toFixed(2)
                allFn()
            }
        }
        // 计算全部的结果
        function allFn(){
            allNumber=0;//防止累加
            for(var k=0;k<aRestAll.length;k++){
                allNumber+=parseFloat(aRestAll[k].innerHTML)
            }
            result.innerText=allNumber.toFixed(2)
        }
        allFn()

    </script>
</body>
</html>